<template>
  <div>
    <p>张宁</p>
    <el-card class="box-card">
      <el-form :inline="true" :model="list" class="demo-form-inline">
        <el-form-item label="标签名称" size="small">
          <el-input placeholder="请输入" v-model="list.tags"></el-input>
        </el-form-item>

        <el-form-item label="城市" size="small">
          <el-select
            @change="onProvince"
            placeholder="请选择"
            v-model="list.province"
          >
            <el-option
              v-for="(item, index) in provinceList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="地区" size="small">
          <el-select placeholder="请选择" v-model="list.city">
            <el-option
              v-for="item in citysList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="企业名称" size="small">
          <el-input placeholder="请输入" v-model="list.shortName"></el-input>
        </el-form-item>

        <el-form-item label="状态" size="small">
          <el-select placeholder="请选择" v-model="list.state">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small">
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onClear">清除</el-button>
        </el-form-item>
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="dialogUserinfo = true"
          >新增用户</el-button
        >
      </el-form>

      <!-- 消息提示 -->
      <el-alert :title="title" type="info" show-icon> </el-alert>
      <!-- 表格 -->
      <el-table :data="companysList" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" width="100"> </el-table-column>
        <el-table-column prop="number" label="企业编号" width="180">
        </el-table-column>
        <el-table-column prop="shortName" label="企业简称"> </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="creatorID" label="创建者"> </el-table-column>
        <el-table-column label="创建日期">
          <template v-slot="{ row }">
            {{ row.addDate | parseTime }}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注"> </el-table-column>
        <el-table-column label="状态">
          <template v-slot="{ row }">
            <div>{{ row.state ? '启用' : '禁用' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              size="medium"
              @click="onCompile(row)"
            ></el-button>

            <el-button
              :type="row.state ? 'success' : 'danger'"
              circle
              plain
              size="medium"
              :icon="row.state ? 'el-icon-check' : 'el-icon-close'"
              @click="onForbidden(row)"
            ></el-button>

            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              size="medium"
              @click="onClears(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 翻页 -->
      <el-pagination
        :page-sizes="[5, 10, 20, 50]"
        :page-size="list.pagesize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,prev, pager, next,sizes,jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 对话框 -->

    <AdduserDialog
      :destroy-on-close="true"
      v-if="dialogUserinfo"
      :showDialog="dialogUserinfo"
      @update="onClose"
      @loadDialog="onloaddialog"
      :CompileList="compileList"
    />
  </div>
</template>

<script>
import AdduserDialog from '@/module-hmmm/components/adduserDialog'
import { list, remove, disabled } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  data () {
    return {
      compileList: {},

      list: {
        state: '', // 状态
        shortName: '', // 企业简称
        city: '', // 企业所在城市
        province: '', // 企业所在省地
        tags: '' // 标签名称
      },
      lists: {
        pagesize: 10, // 页尺寸
        page: 1 // 等钱页数
      },
      provinceList: provinces(), // 省份列表
      citysList: [], // 地区列表
      companysList: [],
      total: 0,
      title: '',
      dialogUserinfo: false
    }
  },
  components: {
    AdduserDialog
  },
  created () {
    this.loadcompanysList()
  },

  methods: {
    onClose () {
      console.log(1)
      this.compileList = {}
      this.dialogUserinfo = false
    },
    async onForbidden (row) {
      this.$confirm('此操作将改变状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (row.state === 0) {
            row.state = 1
          } else {
            row.state = 0
          }
          await disabled({ id: row.id, state: row.state })
          this.$message({
            type: 'success',
            message: '状态改变成功!'
          })
        })
        .catch(() => {})
    },
    async loadcompanysList (data) {
      const res = await list({ ...this.lists, ...data })
      console.log(res)
      this.total = res.data.counts - 0
      this.title = '共有数据' + res.data.counts + '条'
      console.log(this.total)
      this.companysList = res.data.items
      console.log(this.companysList)
    },
    handleCurrentChange (val) {
      console.log(val)
      this.lists.page = val
      this.loadcompanysList()
    },
    handleSizeChange (val) {
      console.log(val)

      this.lists.pagesize = val
      this.loadcompanysList()
    },
    onloaddialog () {
      this.loadcompanysList()
    },
    //
    // 点击清除
    onClear () {
      this.list = {
        state: '', // 状态
        shortName: '', // 企业简称
        city: '', // 企业所在城市
        province: '', // 企业所在省地
        tags: '', // 标签名称
        pagesize: 10, // 页尺寸
        page: 1 // 等钱页数
      }
      this.loadcompanysList()
    },
    // 点击搜索
    onSearch () {
      this.loadcompanysList(this.list)
    },

    // 点击编辑
    onCompile (row) {
      this.compileList = row
      this.dialogUserinfo = true
    },
    // 点击删除
    async onClears (id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
          console.log(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.loadcompanysList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    onProvince (val) {
      this.citysList = []
      this.citysList = citys(val)
      this.list.city = this.citysList[0]
    }
  }
}
</script>

<style scoped lang="less">
.el-card {
  margin-bottom: 30px;
}

/deep/.el-form-item {
  margin: 10px 21px;
  /deep/.el-input {
    width: 260px;
  }
}
/deep/.el-form-item {
  /deep/.el-button {
    width: 65px !important;
    margin: 0 10px;
  }
}
/deep/.el-form {
  /deep/.el-button {
    float: right;
    width: 120px;
  }
}
//  翻页
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  font-weight: normal;
  /deep/.el-pagination__jump {
    margin-left: 0;
  }
}
/deep/ .cell {
  text-align: center;
}
</style>
